<template>
  <div class="app-user-container">
    <div class="left-side dept-tree">
      <div class="search">
        <el-input placeholder="搜索组织名称" v-model="search" />
      </div>
      <el-tree
        class="tree"
        ref="tree"
        :data="orgs"
        :props="defaultProps"
        :highlight-current="true"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        node-key="id"
      >
        <template slot-scope="{ node, data }">
          <el-tooltip effect="dark" :content="node.label" placement="top">
            <span class="text">{{ node.label }}</span>
          </el-tooltip>
        </template>
      </el-tree>
    </div>

    <div class="right-side">
      <el-tabs v-model="isTab">
        <el-tab-pane label="人员列表" name="users" />
        <el-tab-pane label="角色列表" name="roles" />
      </el-tabs>
      <!-- 人员列表 -->
      <user-search-table v-if="isTab == 'users'" :org="org" :uid="uid" key="users" @success="getOrgList(true)" />
      <!-- 角色列表 -->
      <role-search-table v-if="isTab == 'roles'" :uid="uid" key="roles" />
    </div>
  </div>
</template>

<script>
import { getAuthConfig } from '@/api/org'
import { getUserList } from '@/api/identity'
import UserSearchTable from './components/users'
import RoleSearchTable from './components/roles'

export default {
  name: 'User',
  components: {
    UserSearchTable,
    RoleSearchTable,
  },
  data: function () {
    return {
      uid: '',
      org: '',
      search: '',
      orgs: [],
      isTab: 'users',
      defaultProps: {
        children: 'children',
        label: 'displayName',
      },
    }
  },
  watch: {
    search(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.getOrgList()
  },
  methods: {
    async getOrgList(refresh) {
      const auth = await getAuthConfig()
      const result = await this.$store.dispatch('dicts/getOrgList', { params: { id: auth.organizationsId }, refresh })
      this.uid = auth.organizationsId
      this.org = auth.organizationsId
      this.orgs = result
    },
    filterNode(value, data) {
      if (!value) return true
      return data.displayName.indexOf(value) !== -1
    },
    nodeClick({ id }) {
      this.uid = id
    },
  },
}
</script>

<style lang="scss" scoped>
.app-user-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  ::v-deep .left-side.dept-tree {
    min-width: 210px;
    height: 100vh;
    overflow: hidden;
    background: #fff;
    box-sizing: border-box;
    border-right: 1px solid #e4e4e4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    .search {
      height: 70px;
      padding: 25px 20px 10px 20px;
      box-sizing: border-box;
    }
    .el-input input {
      height: 36px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #d9d9d9;
    }
    .el-tree {
      width: 100%;
      flex: 1;
      overflow-y: scroll;
      box-sizing: border-box;
      & > .el-tree-node > .el-tree-node__content {
        padding: 0 10px !important;
      }
      .el-icon-caret-right:before {
        color: #646a73;
      }
      .el-tree-node__expand-icon.is-leaf {
        // display: none !important;
        opacity: 0;
      }
      .is-current {
        position: relative;
      }
      .el-tree-node__content {
        min-height: 45px;
      }
      span.text {
        display: inline-block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .el-tree-node__label {
        font-size: 14px;
        color: #333333;
        font-style: normal;
        span.text {
          display: inline-block;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .right-side {
    flex: 1;

    margin-left: auto;
    background: #fff;
    padding: 0.3rem;
    box-sizing: border-box;
    .dpet-name-count {
      padding: 0px 40px;
      box-sizing: border-box;
      font-size: 16px;
      color: #333333;
      line-height: 21px;
      em {
        font-style: normal;
        color: #0076ff;
      }
    }
  }
  ::v-deep.el-tabs {
    height: 50px;
    .el-tabs__nav-wrap::after {
      height: 1px;
      background-color: #d8d8d8;
    }
    .el-tabs__active-bar {
      height: 3px;
      background-color: rgba(0, 118, 255, 1);
    }
    .el-tabs__item {
      font-size: 14px;
      color: #666666;
      line-height: 20px;
      &.is-active {
        color: rgba(9, 26, 61, 1);
      }
    }
  }
  ::v-deep.table-container {
    .handle-slot {
      padding-left: 0 !important;
    }
  }
  // ::v-deep.user-table,
  // ::v-deep.role-table {
  //   width: 100%;
  //   .handle-slot {
  //     padding-left: 0 !important;
  //   }
  // }
}
</style>
